<template>
    <div>
        <router-link tag="div" to="/" class="detail-header-back" v-show="showAbs">
            <span class="iconfont detail-back">&#xe624;</span>
        </router-link>
        <!-- 绑定style样式，动态获取透明度，实现渐隐渐现效果 -->
        <div class="detail-header-fixed"  :style='opacityStyle' v-show='!showAbs'>
            <router-link tag="span" to="/" class="iconfont detail-header-backico" >&#xe624;</router-link>景区详情
        </div>
    </div>
</template>

<script>
export default {
    name:'detailHeader',
    data(){
        return {
            showAbs:true,
            opacityStyle:{
                opacity:0
            }
        }
    },
    methods: {
        showDetailHeader(){
            // 获取页面卷曲出去的距离使用document.body无法获取，需要使用documentElement
            // console.log(document.documentElement.scrollTop)
            let sTop=document.documentElement.scrollTop
            if(sTop>10){
                this.showAbs=false
                let opacity=sTop/140;
                opacity=opacity>1?1:opacity
                this.opacityStyle={
                    opacity
                }
            }else {
                this.showAbs=true
            }
        }
    },
    // 当添加了keep-alive标签，会提供两个生命周期钩子，当显示该页面时执行activated钩子函数，由于是全局事件，所以需要对全局事件进行解绑，就需要使用deactivated，当离开该页面执行该钩子函数，完成对全局事件的解绑，这样就可以在指定页面执行指定的全局事件了
    activated() {
        window.addEventListener('scroll',this.showDetailHeader)
    },
    deactivated() {
        window.removeEventListener('scroll',this.showDetailHeader)
    },
}
</script>

<style lang="less" scoped>
@import "~@/assets/styles/common.less";
    .detail-header-back {
        position: absolute;
        top: .1rem;
        left: .2rem;
        width: .6rem;
        height: .6rem;
        line-height: .6rem;
        border-radius: 50%;
        background-color: rgba(0, 0, 0, .8);
        text-align: center;
        .detail-back {
            color: #fff;
            font-size: .4rem;
        }
    }
    .detail-header-fixed {
        z-index: 2;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        height: .8rem;
        line-height: .8rem;
        text-align: center;
        background-color: @baseColor;
        color: #fff;
        font-size: .3rem;
        .detail-header-backico{
            float: left;
            margin-left: .2rem;
        }
    }
</style>
